<template>
	<view>
		<Search :tables="tables"></Search>
		<Ticket></Ticket>
		<Classify></Classify>
		<Content id="boxFixed" :class="{'is_fixed' : isFixed}" :tab="tab"></Content>
		<view style="height: 140rpx;"></view>
		<load-list v-if="loadinglist"></load-list>
		<Article :Articleend="Articleend" v-if="!loadinglist"></Article>
		<home-data v-if="homeloda"></home-data>
		<none-data v-if = "nonedata"></none-data>
		<uniLoadMore :status="uniload" v-if="loadmore" color="#ffcc99"></uniLoadMore>
	</view>
</template>

<script>
	import Search from './components/search.vue'
	import Ticket from './components/ticket.vue'
	import Classify from './components/classify.vue'
	import Content from './components/content.vue'
	import Article from './components/article.vue'
	import uniLoadMore from '../../components/uni-load-more/uni-load-more.vue'
	import {
		mapState
	} from 'vuex'
	var {
		log
	} = console
	import {
		home,
		homeList
	} from '../../common/cloundfun.js'
	export default {
		components: {
			Search,
			Ticket,
			Classify,
			Content,
			Article,
			uniLoadMore
		},
		data() {
			return {
				rect: '',
				menutop: '',
				isFixed: false,
				tables: [],
				tab: [],
				Articleend: [],
				loadinglist: false, //tab切换的加载状态
				pageid: 0,
				nav: '',
				uniload: '',
				loadmore: false,
				nonedata:false,
				homeloda:true
			}
		},
		created() {
			//轮播数据
			let tables = "tables"
			let tab = "tab"
			let listing = "recomment"
			Promise.all([home(tables), home(tab), homeList(listing, this.pageid)])
				.then((res) => {
					log(res)
					// 轮播
					this.tables = res[0].data
					// tab切换
					this.tab = res[1].data
					// 攻略景点列表数据
					this.Articleend = res[2].data
					
					this.homeloda = false
				})
		},
		onLoad() {
			//小程序现有方法计算出垂直滚动
			// #ifdef MP-WEIXIN
			const query = wx.createSelectorQuery()
			query.select('#boxFixed').boundingClientRect()
			query.exec((res) => {
				this.menutop = res[0].top
			})
			// console.log('query'mquery)
			// #endif
		},
		//监听页面垂直滚动
		onPageScroll(e) {
			this.rect = e.scrollTop
		},
		// 上拉加载
		onReachBottom() {
			this.uniload = "loading"
			this.loadmore = true
			this.pageid++
			console.log('页数：', this.pageid)
			this.pullon()
		},
		computed: {
			...mapState(['list', 'load', 'navmin','nonemin']),
			count() {
				this.Articleend = this.list.listing
			},
			countload() {
				this.loadinglist = this.load.loading
			},
			navdata() {
				this.loadinglist = this.navmin.loading
				this.nav = this.navmin.naving
				this.pageid = this.navmin.pageid
				this.loadmore = this.navmin.uniload
				this.nonedata = this.navmin.nonedata
			},
			noneted(){
				this.nonedata = this.nonemin.nonedata
			},
			namepage() {
				if (this.rect > this.menutop) {
					this.isFixed = true
				} else {
					this.isFixed = false
				}
			}
		},
		methods: {
			pullon() {
				let listing = this.nav
				homeList(listing, this.pageid)
					.then((res) => {
						if (res.data.length == 0) {
							this.uniload = "noMore"
						} else {
							this.Articleend = [...this.Articleend, ...res.data]
						}
						console.log(res)
					}).catch((err) => {
						console.log(err)
					})
			}
		},

	}
</script>

<style scoped>
	.is_fixed {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 10;
	}
</style>
